<!--
author: 何其沆(pooky)
desc: Others - Statistics - Purchase Order - PO
date: 2021-11-12 页面搭建
data: 2022-03-29 接口核对
-->
<template>
  <e-container style="margin-top: 24px">
    <a-spin :spinning="loading" tip="Loading...">
      <a-table
        :columns="columnsPo"
        :data-source="data"
        class="ant-table-striped"
        :pagination="false"
        :row-class-name="(_record, index) => (index % 2 === 0 ? 'table-striped' : null)"
        @change="sortChange"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'employPrice'">
            <span> Taken Amount </span>
            <a-tooltip placement="bottom">
              <template #title>
                <span
                  >Amount that taken by project(s). For example, maybe the PO amount is 1000$,but only a 200$ project
                  relate to this PO, then the taken amount is 200$.
                </span>
              </template>
              <QuestionCircleOutlined />
            </a-tooltip>
          </template>
        </template>
        <template #emptyText>
          <e-empty />
        </template>
      </a-table>
    </a-spin>
    <div v-if="total > 0" class="pagination">
      <a-pagination
        v-model:current="current"
        v-model:pageSize="pageSize"
        :total="total"
        show-less-items
        :show-size-changer="false"
        @change="changeSize"
      />
    </div>
  </e-container>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import dayjs from 'dayjs'
import { QuestionCircleOutlined } from '@ant-design/icons-vue'
import EContainer from '@/components/EContainer.vue'
import EEmpty from '@/components/EEmpty.vue'
import statistics from '@/api/statistics'

import pageColumns from '@/assets/script/page_columns.js'
const purchaseOrderPo = pageColumns.purchaseOrderPo
const columnsPo = reactive(purchaseOrderPo)

const props = defineProps({
  fromDate: Object,
  toDate: Object
})

const data = ref([])
const current = ref(1)
const pageSize = ref(10)
const total = ref(0)
const sort = ref('')
const order = ref('')
const loading = ref(false)

/**
 * 获取列表
 */
const getList = () => {
  loading.value = true
  statistics
    .getPurchaseOrderPoList({
      fromDate: dayjs(props.fromDate).format('YYYY-MM-DD'),
      toDate: dayjs(props.toDate).format('YYYY-MM-DD'),
      page: {
        pageRows: pageSize.value,
        pageIndex: current.value,
        sort: sort.value,
        order: order.value,
        total: 0
      }
    })
    .then(res => {
      if (res.code === 2000) {
        data.value = res.data
        total.value = res.total
      }
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 30)
    })
}
/**
 * 排序
 * @param p
 * @param f
 * @param s
 */
const sortChange = (p, f, s) => {
  if (s.order === 'ascend') {
    order.value = 'asc'
    sort.value = s.columnKey
  } else if (s.order === 'descend') {
    order.value = 'desc'
    sort.value = s.columnKey
  } else {
    order.value = ''
    sort.value = ''
  }
  getList()
}
/**
 * 修改页码
 * @param val
 */
const changeSize = val => {
  current.value = val
  getList()
}
onMounted(() => {
  getList()
})
</script>

<style scoped lang="less">
@import '@/assets/style/reset_table';
</style>
